<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="150px">
            <el-form-item label="优惠券券码" prop="discountsCdkCode">
              <el-input v-model="queryParams.discountsCdkCode" placeholder="请输入优惠券券码" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="券码状态" prop="codeStatus">
              <el-select v-model="queryParams.codeStatus" placeholder="请选择券码状态" clearable >
                <el-option v-for="dict in cdk_code_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="领取人手机号" prop="getUserPhone">
              <el-input v-model="queryParams.getUserPhone" placeholder="请输入领取人手机号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="领取人玩家号" prop="getUserInviteCode">
              <el-input v-model="queryParams.getUserInviteCode" placeholder="请输入领取人玩家号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <el-tabs v-model="queryParams.isGet" @tab-change="handleQuery" type="card">
        <el-tab-pane label="领取记录" name="true"/>
        <el-tab-pane label="兑换码" name="false"/>
      </el-tabs>
      <el-table border v-loading="loading" :data="discountsCdkLogList">
        <el-table-column label="优惠券券码" align="center" min-width="130px">
          <template #default="scope">
            <div>
              <span>
                {{ scope.row.discountsCdkCode }}
              </span>
              <el-link type="primary" :icon="DocumentCopy" style="margin-left: 5px" @click="copyStr(scope.row.discountsCdkCode)" />
            </div>
            <div v-if="scope.row.getCount != undefined" style="margin-top: 5px">
              <span style="color: red">还可领取{{ scope.row.getCount }}次</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="券码状态" align="center" prop="codeStatus">
          <template #default="scope">
            <dict-tag :options="cdk_code_status" :value="scope.row.codeStatus"/>
          </template>
        </el-table-column>
        <el-table-column label="有效时间" align="center">
          <template #default="scope">
            <span v-if="scope.row.useStartTime && scope.row.useEndTime">{{ parseTime(scope.row.useStartTime) }} 至 {{ parseTime(scope.row.useEndTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="领取人信息" align="center">
          <template #default="scope">
            <el-card v-if="scope.row.getAppUserVo">
              <div class="common-flex-image">
                <image-preview :src="scope.row.getAppUserVo.headPortrait" :width="80" :height="80"/>
                <div style="width: 200px; margin-left: 10px;">
                  <div>
                    昵称：{{scope.row.getAppUserVo.nickName}}
                  </div>
                  <div>
                    <span>
                      手机号：{{scope.row.getAppUserVo.phone}}
                      <el-link type="primary" :icon="DocumentCopy" style="margin-left: 5px" @click="copyStr(scope.row.getAppUserVo.phone)" />
                    </span>
                  </div>
                  <div>
                    <span>
                      玩家号：{{scope.row.getAppUserVo.inviteCode}}
                    </span>
                    <el-link type="primary" :icon="DocumentCopy" style="margin-left: 5px" @click="copyStr(scope.row.getAppUserVo.inviteCode)" />
                  </div>
                </div>
              </div>
            </el-card>
          </template>
        </el-table-column>
        <el-table-column label="时间信息" align="center">
          <template #default="scope">
            <el-row v-if="scope.row.getTime">
              <el-col :span="8">领取时间：</el-col>
              <el-col :span="16">{{ parseTime(scope.row.getTime) }}</el-col>
            </el-row>
            <el-row style="margin-top: 10px" v-if="scope.row.useTime">
              <el-col :span="8">使用时间：</el-col>
              <el-col :span="16">{{ parseTime(scope.row.useTime) }}</el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-popconfirm title="确定要将该券码作废吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="submitCdkDisabled(scope.row)" v-if="scope.row.codeStatus == '0' || scope.row.codeStatus == '1'">
              <template #reference>
                <el-button link type="danger" v-hasPermi="['shop:discountsInfo:disabled']">作废</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
  </div>
</template>

<script setup name="DiscountsCdkLog" lang="ts">
import { listDiscountsCdkLog, discountsCdkDisabled } from '@/api/system/discountsCdkLog';
import { DiscountsCdkLogVO, DiscountsCdkLogQuery, DiscountsCdkLogForm } from '@/api/system/discountsCdkLog/types';
import { DocumentCopy } from '@element-plus/icons-vue';
import clipboard3 from 'vue-clipboard3';

const { toClipboard } = clipboard3();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { cdk_code_status } = toRefs<any>(proxy?.useDict('cdk_code_status'));

const discountsCdkLogList = ref<DiscountsCdkLogVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const discountsCdkLogFormRef = ref<ElFormInstance>();

const props = defineProps({
  discountsId: {
    type: Number,
    default: undefined
  },
});


const initFormData: DiscountsCdkLogForm = {
  id: undefined,
  discountsId: undefined,
  discountsCdkCode: undefined,
  codeStatus: undefined,
  getUserId: undefined,
  useStartTime: undefined,
  useEndTime: undefined,
  disabledCodeStatusList: [],
}
const data = reactive<PageData<DiscountsCdkLogForm, DiscountsCdkLogQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    discountsId: undefined,
    discountsCdkCode: undefined,
    codeStatus: undefined,
    getUserId: undefined,
    useStartTime: undefined,
    useEndTime: undefined,
    isGet: 'true',
    openMerge: true,
    params: {
    }
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);

/** 查询优惠券券码记录列表 */
const getList = async () => {
  loading.value = true;
  queryParams.value.discountsId = props.discountsId;
  const res = await listDiscountsCdkLog(queryParams.value);
  discountsCdkLogList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/**
 * 优惠券作废
 */
 const submitCdkDisabled = async (row?: DiscountsCdkLogVO) => {
  buttonLoading.value = true;
  await discountsCdkDisabled(row).finally(() =>  buttonLoading.value = false);
  proxy?.$modal.msgSuccess("操作成功");
  await getList();
}

/**
 * 复制优惠券券码
 */
const copyStr = async (data?: string) => {
  try {
    await toClipboard(data);
    proxy?.$modal.msgSuccess("内容复制成功");
  } catch (e) {
    proxy?.$modal.msgError("内容复制失败");
  }
}
watch(
  () => props.discountsId,
  (val:number) => {
    if(val){
      getList();
    }
  },
  {deep: true, immediate: true}
);
</script>
